<script lang="ts" setup>
// 最近审批列表组件
interface ApprovalItem {
  id: string
  title: string
  applicant: string
  time: string
  status: number
}

interface Props {
  approvals: ApprovalItem[]
}

const props = defineProps<Props>()

const emit = defineEmits(['item-click', 'view-all'])

function handleItemClick(approval: ApprovalItem) {
  emit('item-click', approval)
}

function handleViewAll() {
  emit('view-all')
}
</script>

<template>
  <view class="mb-6">
    <view class="mb-3 flex items-center justify-between px-4">
      <text class="text-base font-medium">最近审批</text>
      <text class="text-sm text-blue-500" @click="handleViewAll">查看全部</text>
    </view>
    <view class="px-4">
      <!-- 审批列表 -->
      <template v-if="approvals && approvals.length > 0">
        <view
          v-for="approval in approvals"
          :key="approval.id"
          class="mb-3 border border-gray-100 rounded-lg bg-white p-4 shadow-sm"
          @click="handleItemClick(approval)"
        >
          <view class="mb-2 flex items-center justify-between">
            <text class="text-base font-medium">{{ approval.title }}</text>
            <approval-status-tag :value="approval.status" />
          </view>
          <view class="flex items-center justify-between">
            <text class="text-sm text-gray-600">申请人：{{ approval.applicant }}</text>
            <text class="text-xs text-gray-500">{{ approval.time }}</text>
          </view>
        </view>
      </template>
      <!-- 空状态 -->
      <view v-else class="border border-gray-100 rounded-lg bg-white p-8 text-center shadow-sm">
        <text class="text-gray-400">暂无已审批数据</text>
      </view>
    </view>
  </view>
</template>
